<template>
    <div>
        <!-- <van-grid :column-num="5">
            <van-grid-item icon="photo-o" text="今日爆款" />
            <van-grid-item icon="photo-o" text="好物分享" />
            <van-grid-item icon="photo-o" text="推荐购买" />
            <van-grid-item icon="photo-o" text="购物心得" />
            <van-grid-item icon="photo-o" text="直播专区" />
            <van-grid-item icon="photo-o" text="签到中心" />
            <van-grid-item icon="photo-o" text="值得购买" />
            <van-grid-item icon="photo-o" text="每日优惠" />
            <van-grid-item icon="photo-o" text="充值中心" />
            <van-grid-item icon="photo-o" text="我的客服" />
        </van-grid> -->
        <van-grid :column-num="4">
         <van-grid-item v-for="value in list" :key="value" :icon="value.url" :text="value.text" />
        </van-grid>


    </div>
</template>

<script setup>
import { reactive } from 'vue';
import menu1 from '../assets/images/menu1.png'
import menu2 from '../assets/images/menu2.png'
import menu3 from '../assets/images/menu3.png'
import menu4 from '../assets/images/menu4.png'
import menu5 from '../assets/images/menu5.png'
import menu6 from '../assets/images/menu6.png'
import menu7 from '../assets/images/menu7.png'
import menu8 from '../assets/images/menu8.png'
import menu9 from '../assets/images/menu9.png'
import menu10 from '../assets/images/menu10.png'
const list = reactive([
    {url:menu1 ,text:'今日爆款'},
    {url:menu2 ,text:'好物分享'},
    {url: menu3,text:'推荐购买'},
    {url: menu4,text:'购物心得'},
    {url: menu5,text:'直播专区'},
    {url: menu6,text:'签到中心'},
    {url: menu7,text:'值得购买'},
    {url:menu8 ,text:'每日优惠'},
])
</script>